// 定义行高
@line-height: 127.61px;

.layout-module_Category {
  .category-module_header {
    font-size: 14px;
    height: 32px;
    padding: 0 7px;
    line-height: 32px;
    margin-bottom: 30px;

    .tag-menu {
      display: inline-block;
      line-height: 14px;
      border-radius: 4px;
      padding: 8px 10px;
      margin-right: 16px;

      span {
        cursor: pointer;
        color: var(--font-color);

        &:hover {
          color: var(--title-color);
        }
      }
    }

    .active {
      font-weight: 600;
      background-color: var(--dropdown-bg-color);
    }
  }

  .category-module_list {
    .list-group {
      .row {
        margin: 0;
      }

      .item {
        margin-bottom: 25px;

        height: @line-height;

        .text {
          width: auto;
          padding: 0 15px 0 5px;
        }

        .preview-image {
          padding: 0 5px 0 10px;

          .img-fluid {
            width: 100%;
            height: auto;
            height: @line-height;
            overflow: hidden;
            transform: translateY(0);
            border-radius: 16px;
          }
        }

        .title {
          margin-bottom: 14px;

          :hover {
            color: var(--title-color);
          }

          span {
            color: var(--font-color);
            font-weight: 600;
            font-size: 16px;
            line-height: 25px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .description {
          width: auto;
          height: 45px;
          margin-bottom: 5px;

          span {
            color: var(--title-color);
            margin-top: 8px;
            display: -webkit-box;
            max-height: 44px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 22px;
            height: 44px;
          }
        }

        .item-addition-info {
          margin: 0;
          font-size: 13px;
          color: var(--font-color);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .author-info {
            display: flex;
            align-items: center;
            width: 50%;

            .user-card {
              display: inline-block;
              max-width: 50%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              a {
                color: var(--font-color);
                font-size: 12px;
                font-weight: 600;

                &:hover {
                  color: var(--title-color);
                }
              }
            }
            .count-info {
              margin-left: 10px;

              .liked {
                color: @like-color;
              }
            }
          }

          .acticle-tags {
            width: 50%;
            max-width: 50%;
            display: flex;
            justify-content: flex-end;

            .ant-tag {
              font-size: 11px;
              max-width: 33%;
              padding: 0 4px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}